<template>
  <div class="main-container">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
    >
      <el-menu-item index="0">
        <template #title>
          <span class="bold-heiti">塔云</span>
        </template>
      </el-menu-item>
      <div class="flex-grow"></div>
      <div class="centered-text">后台管理系统页面</div>
      <div class="flex-grow"></div>
      <el-menu-item index="1">您好! {{this.currentAdminName}}</el-menu-item>
    </el-menu>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px" class="custom-aside">
          <el-menu default-active="2" class="el-menu-vertical-demo" router>
            <el-menu-item :index="data1.path">
              <el-icon><DataBoard /></el-icon> <!-- 使用图标 -->
              <span>数据看板</span>
            </el-menu-item>
            <!-- 权限管理 -->
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Key /></el-icon>
                <span>权限管理</span>
              </template>
              <el-menu-item v-for="item in menuList1" :index="item.path" :key="item.path">
                <el-icon><icon-menu /></el-icon>
                <span>{{ item.meta.title }}</span>
              </el-menu-item>
            </el-sub-menu>
            <!-- 其他菜单 -->
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Check /></el-icon>
                <span>审核管理</span>
              </template>
              <el-menu-item v-for="item in menuList2" :index="item.path" :key="item.path">
                <el-icon><icon-menu /></el-icon>
                <span>{{ item.meta.title }}</span>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Notification /></el-icon>
                <span>公告</span>
              </template>
              <el-menu-item v-for="item in menuList3" :index="item.path" :key="item.path">
                <el-icon><icon-menu /></el-icon>
                <span>{{ item.meta.title }}</span>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><ChatDotRound /></el-icon>
                <span>申诉与建议</span>
              </template>
              <el-menu-item v-for="item in menuList4" :index="item.path" :key="item.path">
                <el-icon><icon-menu /></el-icon>
                <span>{{ item.meta.title }}</span>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><Goods /></el-icon>
                <span>商品管理</span>
              </template>
              <el-menu-item v-for="item in menuList5" :index="item.path" :key="item.path">
                <el-icon><icon-menu /></el-icon>
                <span>{{ item.meta.title }}</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main class="custom-main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { DataBoard } from '@element-plus/icons-vue';
import { Key } from '@element-plus/icons-vue';
import { Check } from '@element-plus/icons-vue';
import { Notification } from '@element-plus/icons-vue';
import { ChatDotRound } from '@element-plus/icons-vue';
import { Goods } from '@element-plus/icons-vue';// 导入图标
import { ref } from "vue";

export default {
  components: {
    DataBoard,
    Key,
    Check,
    Notification,
    ChatDotRound,
    Goods,// 注册图标组件
  },
  data() {
    return {
      router: useRouter(),
      activeIndex: 1,
      menuList1: [],
      menuList2: [],
      menuList3: [],
      menuList4: [],
      menuList5: [],
      data1: { path: '/data' },
      data2: { path: '/productm' },
      currentAdminName: ''
    };
  },
  methods: {
    handleSelect(key, keypath) {
      console.log('Selected key:', key, 'Key path:', keypath);
    }
  },
  mounted() {
    this.currentAdminName = localStorage.getItem('adminName');
    const myrouter = this.router.getRoutes();
    this.menuList1 = myrouter.filter(item => item.meta.power === 50);
    this.menuList2 = myrouter.filter(item => item.meta.power === 60);
    this.menuList3 = myrouter.filter(item => item.meta.power === 70);
    this.menuList4 = myrouter.filter(item => item.meta.power === 80);
    this.menuList5 = myrouter.filter(item => item.meta.power === 90);
    console.log(myrouter);
  }
};
</script>

<style scoped>
/* 设置全局浅蓝色背景 */
body {
  background-color: #f0f8ff;
  margin: 0;
  font-family: Arial, sans-serif;
}

.main-container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #d0e8ff;
  border-radius: 8px;
  margin: 20px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.el-menu-demo {
  background-color: #e6f7ff;
  border-bottom: 1px solid #d0e8ff;
}

.el-menu-item {
  color: #007acc;
}

.el-menu-item:hover {
  background-color: #cce7ff;
}

.el-menu-item.is-active {
  background-color: #007acc;
  color: #ffffff;
}

.el-icon {
  color: #007acc;
}

.flex-grow {
  flex-grow: 1;
}

.bold-heiti {
  font-weight: bold;
  font-family: '黑体', sans-serif;
}

.centered-text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  color: #007acc;
  font-weight: bold;
}

.common-layout {
  margin-top: 0;
  background-color: #f0f8ff;
  border-top: 1px solid #d0e8ff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.custom-aside {
  background-color: #ffffff;
  border-right: 1px solid #d0e8ff;
  padding: 10px;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1); /* 内部阴影 */
}

.custom-main {
  background-color: #ffffff;
  padding: 20px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); /* 内部阴影 */
}

.el-sub-menu__title {
  color: #007acc;
}

.el-menu-item .el-icon {
  margin-right: 5px;
}

.el-menu-vertical-demo .el-menu-item:hover,
.el-menu-vertical-demo .el-sub-menu__title:hover {
  background-color: #cce7ff;
}

.el-menu-vertical-demo .el-menu-item.is-active,
.el-menu-vertical-demo .el-sub-menu__title.is-active {
  background-color: #007acc;
  color: #ffffff;
}
</style>
